import IconFont from "@/components/CustomIcon"
import { Checkbox, Button, Toast } from "antd-mobile"
import { Input } from "antd-mobile"
import Captcha from "react-captcha-code"
import "./index.less"
import { useCallback, useState } from "react"
import { registerApi, LoginApi } from "@/apis/index"
import { useNavigate } from "react-router-dom"
function Login() {
  const [type, setType] = useState("login")
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")
  const [verify, setVerify] = useState("")
  const [captcha, setCaptcha] = useState("")
  const navigate = useNavigate()
  const handleChange = useCallback((captcha) => {
    setCaptcha(captcha)
  }, [])

  const onSubmit = async () => {
    if (!username) {
      Toast.show("请输入账号")
      return
    }
    if (!password) {
      Toast.show("请输入密码")
      return
    }
    if (type === "register") {
      if (!verify) {
        Toast.show("请输入验证码")
        return
      }
      if (verify != captcha) {
        Toast.show("验证码错误")
        return
      }
      try {
        const { data } = await registerApi({ username, password })
        Toast.show(data.msg)
        if (data.code === 200) {
          setType("login")
        }
      } catch {
        Toast.show("系统错误")
      }
    } else {
      const { data } = await LoginApi({ username, password })
      if (data.code === 500) {
        Toast.show("账号或密码错误")
      } else {
        localStorage.setItem("token", data.data.token)
        navigate("/")
      }
    }
  }
  return (
    <div className="loginbody">
      <div className="tab">
        <span
          className={type === "login" ? "avtive" : undefined}
          onClick={() => setType("login")}
        >
          登录
        </span>
        <span
          className={type === "register" ? "avtive" : undefined}
          onClick={() => setType("register")}
        >
          注册
        </span>
      </div>
      <div className="cell">
        <IconFont type="zhanghao" />
        <Input
          placeholder="请输入账号"
          type="text"
          onChange={(val) => setUsername(val)}
        />
      </div>
      <div className="cell">
        <IconFont type="mima"></IconFont>
        <Input
          placeholder="请输入密码"
          type="password"
          onChange={(val) => setPassword(val)}
        />
      </div>
      {type === "register" ? (
        <div className="cell">
          <IconFont type="mima"></IconFont>
          <Input
            placeholder="请输入验证码"
            type="text"
            onChange={(val) => setVerify(val)}
          />
          <Captcha className="capcha" charNum={4} onChange={handleChange} />
        </div>
      ) : null}

      <div className="agree">
        {type === "register" ? (
          <Checkbox>阅读并同意 《掘掘手札条款》</Checkbox>
        ) : null}

        <Button block color="primary" size="large" onClick={onSubmit}>
          {type === "register" ? "注册" : "登录"}
        </Button>
      </div>
    </div>
  )
}

export default Login
